<template>
    <div>
        <header class="header-content">
            <div class="header-icon-back" @click="to('car')"><span></span></div>
            <div class="header-title">确认订单</div>
        </header>
        <div class="view-content">
            <div class="address-bar">
                <div class="address-box">
                    <div class="address-box-icon"><img src="../assets/icon/icon_nav_city.png" /></div>
                    <div class="address-details">
                        <div class="address-name"><span>杜杰</span><span>13854652512</span></div>
                        <div class="address-text">宿迁市洋河新区电商产业园105号</div>
                    </div>
                    <div class="icon-more" @click="to('addressList')">
                        <img src="../assets/icon/icon-more.png">
                    </div>
                </div>
            </div>
            <div class="pay-goods-bar">
                <div class="pay-goods-list">
                    <div class="goods-img">
                        <img src="../assets/category/pro3.jpg">
                    </div>
                    <div class="pay-goods-details">
                        <div class="pay-goods-name">蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食酒2瓶装包邮</div>
                        <p class="pay-goods-desc">规格：<span>红色</span>，<span>23</span></p>
                        <div class="pay-goods-price">
                            <span class="pay-goods-price-fl">¥296.00</span>
                            <span class="pay-goods-price-fr">数量×1</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pay-panel">
                <div class="shipping">
                    <span>配送方式</span><span>快递</span>
                </div>
                <div class="freight">
                    <span>运费</span><span>￥10.00</span>
                </div>
                <div class="gold">
                    <span>可用金币</span><span>1235个</span>
                </div>
                <div class="coupon">
                    <span>优惠券</span><span>0张可用</span>
                </div>
            </div>
        </div>
        <div class="payment widthFull">
            <div class="total">总金额：<span>¥296.00</span></div>
            <div class="for-pay">付款</div>
        </div>
    </div>
</template>
<style scoped>
    @import "../css/style.css";
    
    .address-bar {
        background: url(../assets/icon/location-border.png) repeat-x left bottom #fff;
        background-size: auto 0.1875rem;
        margin-bottom: 0.625rem;
        padding: 0.75rem 0.625rem;
        border-top: 0.0625rem solid #e1e1e1;
    }
    .address-box {
        display: flex;
        align-items: center;
    }
    .address-box-icon {
        width: 1.25rem;
        margin-right: 0.625rem;
        line-height: 3.75rem;
        font-size: 0.8125rem;
    }
    .address-box-icon img {
        width: 80%;
    }
    .address-details {
        text-align: left;
        flex: 1;
    }
    .address-name {
        font-size: 0.9375rem;
        font-weight: bold;
    }
    .address-name span {
        margin-right: 0.625rem
    }
    .address-text {
        font-size: 0.8125rem;
    }
    .pay-goods-bar {
        margin: 0.625rem 0;
        background: #fff;
        padding: 0.75rem 0.625rem;
        border-top: 0.0625rem solid #e1e1e1;
        border-bottom: 0.0625rem solid #e1e1e1;
    }
    .pay-goods-list {
        display: flex;
    }
    .goods-img {
        width: 5.125rem;
        height: 5.125rem;
        margin-right: 0.625rem;
    }
    .goods-img img {
        width: 5.125rem;
        height: 5.125rem;
    }
    .pay-goods-details {
        flex: 1;
        min-width: 0;
    }
    .pay-goods-name {
        font-size: 0.875rem;
        color: #232323;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.8rem;
        text-align: left;
    }
    .pay-goods-desc {
        line-height: 1.4rem;
        font-size: 13px;
        text-align: left;
    }
    .pay-goods-price {
        margin-top: 0.625rem;
        text-align: left;
    }
    .pay-goods-price-fl {
        color: #e21323;
        font-size: 0.9375rem;
        margin-top: 0.1875rem;
        line-height: 1.25rem;
        font-weight: bold;
        margin-left: 0.125rem;
        float: left;
    }
    .pay-goods-price-fr {
        line-height: 1.5rem;
        padding-right: 0.625rem;
        font-size: 0.75rem;
        float: right;
    }
    .pay-panel {
        margin-top: 0.625rem;
    }
    .shipping,
    .freight,
    .gold,
    .coupon {
        background-color: #fff;
        padding: 0.625rem 0.9375rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.875rem;
        border-bottom: 0.01rem solid #f5f5f5;
    }
    .payment {
        background: #fff;
        padding: 0.75rem 0.625rem;
        border-top: 0.0625rem solid #e1e1e1;
        border-bottom: 0.0625rem solid #e1e1e1;
        bottom: 0;
    }
    .total span {
        color: #e21323;
        line-height: 1.25rem;
        font-size: 1.25rem;
        font-weight: bold;
    }
    .for-pay {
        font-size: 1.125rem;
        color: #fff;
        line-height: 2.55rem;
        border-radius: 0.3125rem;
        background-color: #1aad19;
    }
</style>
<script>
    export default {
        methods: {
            to(page) {
                this.$router.push({
                    name: page
                })
            }
        }
    }
</script>

